JavaScript进阶编程笔记

共计 3781 个字符，预计需要花费 10 分钟才能阅读完成。

函数

动态参数

arguments 是函数内部内置的伪数组变量，它包含了调用函数时传入的所有实参。

function sum() {
  let s = 0
  for (let i = 0; i < arguments.length; i++) {s += arguments[i]
  }
  console.log(s)
}
sum(1, 3, 5)

剩余参数

… 是语法符号，用于获取多余的实参，是个真数组。实际开发中，推荐使用剩余参数。

function sum(a, b, ...other) {
  let s = a + b
  for (let i = 0; i < other.length; i++) {s += other[i]
  }
  console.log(s)
}
sum(1, 3, 5, 7)

箭头函数 this

箭头函数不会创建自己的 this，它只会从自己作用域链的上一层沿用 this。

如果直接在箭头后设置对象字面量为返回值时，对象字面量必须使用 () 括起来。

const fn = () => ({ name: '李小龙'})
console.log(fn())

内置构造函数

Object

const obj = {name: " 佩奇 ", age: 12}
console.log(Object.keys(obj)) //['name', 'age']
console.log(Object.values(obj)) //['佩奇', 12]

Object.assign(obj, { sex: " 女 "}) // 拷贝对象
console.log(obj) //{name: '佩奇', age: 12, sex: '女'}

Array

filter，筛选数组

const arr = [1, 4, 7, 9]
const newArr = arr.filter(function (value, index) {return value > 5})
console.log(newArr) //[7, 9]

reduce

const arr = [1, 3, 5]
const total = arr.reduce(function (prev, current) {return prev + current})
console.log(total) //9

// 有初始值
const total2 = arr.reduce(function (prev, current) {return prev + current}, 10)
console.log(total2) //19

// 箭头函数写法
const total3 = arr.reduce((prev, current) => prev + current, 10)
console.log(total3) //19

find，找到就返回。

const arr = [{ name: " 佩奇 ", age: 18},
  {name: " 乔治 ", age: 16},
]
const p = arr.find(function (item) {return item.name === " 佩奇 "})
console.log(p) //{name: '佩奇', age: 18}

findIndex()用于找出第一个符合条件的数组成员的位置，如果没有找到返回 -1。

some，有一个符合条件就返回 true，否则返回 false。

const arr = [1, 4, 7, 9]
const flag = arr.some(function (value, index) {return value > 5})
console.log(flag) //true

注意：在 some 里面遇到 return true 会终止遍历，迭代效率更高。

every，每一个是否都符合条件，都符合返回 true，否则返回 false。

const arr = [1, 5, 8]
const flag = arr.every((item) => item >= 1)
console.log(flag) //true

from，把伪数组转换为真数组。

const lst = document.querySelectorAll("ul li")
const lst2 = Array.from(lst)
console.log(lst2)

String

const str = " 佩奇, 乔治 "
const arr = str.split(",")
console.log(arr) //['佩奇', '乔治']

console.log(str.substring(2)) //, 乔治
console.log(str.substring(3, 5)) // 乔治

console.log(str.startsWith(" 佩奇 ")) //true

console.log(str.includes(" 佩奇 ")) //true

深浅拷贝

浅拷贝

如果是简单数据类型拷贝值，引用数据类型拷贝的是地址（简单理解，如果是单层对象，没问题，如果有多层就有问题）。

const obj = {
  name: " 佩奇 ",
  age: 10,
}
// 方法一
const obj2 = {...obj}
obj2.age = 12
console.log(obj.age) //10
console.log(obj2.age) //12
// 方法二
const obj3 = {}
Object.assign(obj3, obj)
obj3.age = 14
console.log(obj.age) //10
console.log(obj3.age) //14

const arr = [{age: 18}, {age: 20}]
const arr2 = arr.slice() // 浅拷贝
const arr3 = structuredClone(arr) // 深拷贝
console.log(arr2[0] === arr[0]) //true
console.log(arr3[0] === arr[0]) //false

深拷贝

方法一，递归实现：

const obj = {
  name: " 佩奇 ",
  age: 10,
  hobby: [" 唱歌 ", " 跳舞 "],
}
function deepCopy(newObj, oldObj) {for (let k in oldObj) {if (oldObj[k] instanceof Array) {newObj[k] = []
      deepCopy(newObj[k], oldObj[k])
    } else if (oldObj[k] instanceof Object) {newObj[k] = {}
      deepCopy(newObj[k], oldObj[k])
    } else {newObj[k] = oldObj[k]
    }
  }
}
const obj2 = {}
deepCopy(obj2, obj)
obj2.hobby[0] = " 睡觉 "
console.log(obj.hobby[0]) // 唱歌

方法二，使用 js 库 lodash 里面的 cloneDeep 实现：

<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script>
  const obj = {
    name: " 佩奇 ",
    age: 10,
    hobby: [" 唱歌 ", " 跳舞 "],
  }
  const obj2 = _.cloneDeep(obj)
  obj2.hobby[0] = " 睡觉 "
  console.log(obj.hobby[0]) // 唱歌
</script>

方法三，使用 JSON 字符串转换实现：

const obj = {
  name: " 佩奇 ",
  age: 10,
  hobby: [" 唱歌 ", " 跳舞 "],
}
const obj2 = JSON.parse(JSON.stringify(obj))
obj2.hobby[0] = " 睡觉 "
console.log(obj.hobby[0]) // 唱歌

Map

Map 用来存储键值对结构的数据 (key-value)。

Map 和 Object 的主要区别:

• Object 中的属性名只能是字符串。如果传递了一个其他类型的属性名，JS 解释器会自动将其转换为字符串
• Map 中任何类型值都可作为 key

属性和方法:

• map.size()获取 map 中键值对的数量
• map.set(key，value)向 map 中添加键值对
• map.get(key)根据 key 获取值
• map.delete(key)删除指定数据
• map.has(key)检查 map 中是否包含指定键
• map.clear()删除全部的键值对

const map = new Map() // 空 Map
map.set('name', '李小龙') // 添加 key-value
console.log(map.has('name')) // true 是否存在 key
map.set(NaN, '呵呵')
console.log(map.get(NaN)) // 呵呵 获取 value
map.delete(NaN) // 删除 key
console.log(map) // Map(1) {'name' => '李小龙'}

// Map 转数组
const arr = Array.from(map) // 方法一
const arr2 = [...map] // 方法二

// 数组转 Map
const map2 = new Map([['name', '猪八戒'],
  ['age', 18],
])
console.log(map2) //{'name' => '猪八戒', 'age' => 18}

Set

用来创建一个集合，功能和数组类似，不同点在于 Set 中不能存储重复数据。

方法：

• size 获取数量
• add()添加元素
• has()检查元素
• delete()删除元素

const set = new Set()
set.add(1)
set.add('李小龙')
console.log(set) //{1, '李小龙'}